<!-- 递归 家族节点 自己写的 没用上 -->
<template>
  <div v-for="(v, i) in list" :key="i">
    <div class="flex c3">
      <div
        v-for="(vv, ii) in num"
        :key="ii"
        class="c4"
        :class="'c4-' + ii + num"
      ></div>
      <div class="c5 flex" @click.stop="select(v)">
        <div v-for="(val, index) in v.value" :key="index" class="c2 flex">
          <div class="flex img">
            <img :src="config.serverImg + val.img" alt="" />
          </div>
          <div class="c1">
            <p>{{ val.name }}</p>
            <p>id:{{ v.id }}-{{ val.year }}</p>
          </div>
        </div>
      </div>
    </div>
    <dg :list="v.children" :num="num + 1" @select="select" />
  </div>
</template>

<script setup>
import dg from "@/components/dg.vue";
import config from "@/common/config.js";
const emit = defineEmits(["select"]);
const props = defineProps({
  list: {
    type: Array,
    default: [],
  },
  num: {
    type: Number,
    default: 1,
  },
});

const select = (v) => {
  emit("select", v);
};
</script>

<style scoped>
.c1 {
  font-size: 14px;
  margin-top: 5px;
  color: #383838;
}
.c2 {
  width: 100px;
}
.c2 .img {
  margin-right: 5px;
}
.c2 img {
  width: 40px;
  height: 40px;
  border-radius: 100%;
}
/* .c3{margin-bottom: 20px;} */
.c4 {
  width: 64px;
  position: relative;
  height: 64px;
}
.c4::after {
  content: "";
  display: block;
  position: absolute;
  left: 64px;
  height: 64px;
  background: #111;
  width: 1px;
  bottom: 0;
}
/* 	.c4-02{border-bottom:0;}
	.c4-03{border-bottom:0;}
	.c4-13{border-bottom:0;} */
.c5 {
  padding: 10px;
  border-bottom: 1px solid #111;
}
</style>
